<template>
	<view class="login_page">
		<view class="header">
			<image src="https://static.tianwandailian.cn/static/server/newimage/back_icon.png" mode="" class="back-img"
				@click="goBack"></image>
			<view class="title-box">
				<view class="title">注册</view>
				<view class="text">
					您好, 欢迎来到天玩
				</view>
			</view>
		</view>
		<view class="main">
			<view class="login-box">
				<view class="form">
					<uv-form labelPosition="top" :model="form" ref="formRef">
						<view v-if="steps === 0">
							<uv-form-item prop="phone">
								<view class="ipt-box">
									<uv-input type="number" placeholder="请输入手机号" placeholder-class="placeholderStyle" border="none"
										maxlength="11" v-model="form.phone" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" placeholder="请输入验证码" placeholder-class="placeholderStyle" border="none"
										v-model="form.code" :maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode" style="color: #6E68E9;font-size: 28rpx;">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<view class="check-box">
								<uv-checkbox-group shape="circle" v-model="form.checked" size="20" activeColor="#6F69E9">
									<view style="display: flex; align-items: center">
										<uv-checkbox name="true"></uv-checkbox>
										<view style="font-size: 24rpx; color: #666666" @click="handleClick">
											我已阅读并同意<text style="color: #453DE7;">《注册隐私协议》</text>
										</view>
									</view>
								</uv-checkbox-group>
							</view>

							<uv-button type="primary" text="下一步" :disabled="!form.phone" @click="submit(1)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>

						</view>
						<view v-else>
							<uv-form-item prop="pwd">
								<view class="ipt-box">
									<uv-input placeholder="请输入密码" placeholder-class="placeholderStyle" border="none" v-model="form.pwd"
										clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="repeatPassword">
								<view class="ipt-box">
									<uv-input placeholder="请再次输入密码" placeholder-class="placeholderStyle" border="none"
										v-model="form.repeatPassword" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="注册" @click="submit(2)" :disabled="!form.repeatPassword||!form.pwd"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
					</uv-form>
				</view>


			</view>
		</view>
		<uv-modal ref="modalRef" title="注册成功" align="center" content='天玩账号注册成功,请前往登录.' confirmText="确定"
			confirmColor="#6E68E9" @confirm="toLogin"></uv-modal>
	</view>

</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		checkStr
	} from '@/utils';
	import {
		CheckSmsCode,
		Register,
		SendSmsCode,
		GetUserRuleList
	} from '@/api/modules/system';
	import Md5 from 'js-md5'
	import config from '@/api/config';
	import {
		getOaidAndImei
	} from '@/utils';

	const form = reactive({
		phone: "",
		code: "",
		pwd: "",
		repeatPassword: '',
		checked: []
	})

	const formRef = ref()

	const codeTips = ref("")
	//	倒计时
	function codeChange(text) {
		codeTips.value = text;
	}
	// 	获取验证码
	const uCodeRef = ref()

	function getCode() {
		if (!form.phone || !checkStr(form.phone, 'mobile')) {
			uni.$uv.toast('请输入正确的手机号');
			return
		}

		if (uCodeRef.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			SendSmsCode({
				phone: form.phone,
				isRegister: 0
			}).then(res => {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				uCodeRef.value.start();
			})
		}
	}

	const selectRadio = ref(true)
	const steps = ref(0)
	const modalRef = ref()

	async function submit(type) {
		if (type === 1) {
			if (!form.phone || !checkStr(form.phone, 'mobile')) {
				uni.$uv.toast('请输入正确的手机号');
				return
			}

			if (!form.code || form.code.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}

			if (form.checked.length <= 0) {
				uni.$showModal({
						title: '',
						opacity: 0.8,
						content: '点击确定即代表您已阅读并同意《注册隐私协议》',
						confirmVal: '确定',
						cancelVal: '取消'
					})
					.then(() => {
						form.checked.push('true')
						CheckSmsCode({
							phone: form.phone,
							isRegister: 0,
							smsCode: form.code
						}).then(res => {
							steps.value = type
						})
					})
			} else {
				CheckSmsCode({
					phone: form.phone,
					isRegister: 0,
					smsCode: form.code
				}).then(res => {
					steps.value = type
				})
			}

		} else {
			if (form.pwd !== form.repeatPassword) {
				uni.$uv.toast('两次密码不一致，请重新输入密码')
				return
			}
			if (form.pwd.length < 6) {
				uni.$uv.toast('密码长度最少为6位')
				return
			}
			if (form.repeatPassword.length < 6) {
				uni.$uv.toast('密码长度最少为6位')
				return
			}
			if (checkStr(form.repeatPassword, 'chinese')) {
				uni.$uv.toast('密码不支持汉字，请重新输入')
				return
			}

			if (!form.pwd || !form.repeatPassword) {
				uni.$uv.toast('账号或密码不能为空!')
				return
			}

			const deviceInfo = await getOaidAndImei()

			const MD5_PWD = Md5(form.pwd)
			const MD5_REPPWD = Md5(form.repeatPassword)

			Register({
				deviceType: deviceInfo.type,
				deviceId: deviceInfo.id,
				userSource: config.USER_SOURCE,
				phone: form.phone,
				repeatPassword: MD5_REPPWD,
				loginPwd: MD5_PWD
			}).then(res => {
				modalRef.value.open()
			})
		}
	}
	const ruleData = ref({})
	const ruleModalRef = ref()
	const handleClick = () => {
		uni.navigateTo({
			url: `/pages/system/privacy_agreement?code=6`
		})
	}

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}

	function goBack() {
		uni.navigateBack()
	}
</script>
<script>

</script>
<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-size: contain;
		background-image: url('https://static.tianwandailian.cn/static/server/newimage/order_bg.png');
		background-repeat: no-repeat;

		.header {
			height: 352rpx;
			width: 100%;

			.back-img {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 95rpx;
				left: 32rpx;
			}

			.title-box {
				margin: 206rpx 76rpx 0;

				.title {
					color: #222;
					font-size: 64rpx;
					font-weight: 600;
				}

				.text {
					color: #666666;
					font-size: 40rpx;
					margin-top: 16rpx;
				}
			}

			.tip {
				font-size: 24rpx;
				color: #888888;
				margin-top: 30rpx;
				margin-left: 76rpx;
			}
		}

		.main {
			width: calc(100vw - 152rpx);
			padding: 0 76rpx;
			flex: 1;
			display: flex;

			.login-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.oauth {
					text-align: center;
					margin-top: 242rpx;

					.number {
						font-size: 60rpx;
						font-weight: 700;
						color: #222
					}

					.tip {
						margin-top: 30rpx;
						font-size: 28rpx;
						color: #888
					}

					.btn-box {
						margin-top: 120rpx;
					}
				}



				.form {
					margin-top: 164rpx;
					margin-bottom: 100rpx;

					.uv-form {
						width: 100%;

						.ipt-box {
							background: #F5F5F5;
							height: 96rpx;
							border-radius: 16rpx;
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							padding: 0 30rpx;

							.placeholderStyle {
								color: #CCCCCC;
								font-size: 28rpx;
							}

						}
					}

					.check-box {
						margin-left: 18rpx;
						margin-top: 36rpx;
					}
				}


			}
		}
	}
</style>